import { useMemo } from "react"
import { Image, View, RootPortal } from "@tarojs/components"
import { useAppDispatch, useAppSelector } from "@/store/hook"
import { setActive } from "@/store/actions/tabbar"
import { navigation } from "@/utils/router"
import { pageMapperCommunity } from "@/constants/pageMap"
import { authActionHandler } from "@/utils/app"

/**
 * 自定义tabbar组件
 * @description 由于目前taro框架本身原因, 在skyline渲染模式下不生效, 所以使用skyline渲染模式的页面可能需要此组件显示添加底部tabbar
 */
export default function CustomTabbarForSkyline() {
  const dispatch = useAppDispatch()
  const { tabBar, current, appear } = useAppSelector(state => state.tabbar)
  const { left, right } = useMemo(() => {
    return {
      left: tabBar.list.slice(0, 2),
      right: tabBar.list.slice(2)
    }
  }, [tabBar.list])
  function handleChangeTab(tabbarItem: TabBarListItem) {
    if (current !== tabbarItem.pagePath) {
      dispatch(setActive(tabbarItem.pagePath))
      navigation(tabbarItem.pagePath, null, "switchTab")
    }
  }
  function handleClickAction() {
    authActionHandler(navigateToPublishNote, {
      mobile: true,
      avatarAndNickname: true
    })
  }
  function navigateToPublishNote() {
    dispatch(setActive(null))
    navigation(pageMapperCommunity.NotePublish, null)
  }
  if (!appear) return null
  return (
    <RootPortal>
      <View
        style={{
          position: "absolute",
          bottom: 0,
          left: 0,
          right: 0,
          width: "100%",
          boxSizing: "content-box",
          backgroundColor: tabBar.backgroundColor
        }}
      >
        <View
          style={{
            height: 56,
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-around",
            alignItems: "center",
            boxSizing: "border-box"
          }}
        >
          {left.map(l => (
            <View
              key={l.pagePath}
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
                boxSizing: "border-box",
                paddingLeft: 16,
                paddingRight: 16,
                pointerEvents: "auto"
              }}
              onClick={() => handleChangeTab(l)}
            >
              <Image
                src={l.pagePath === current ? l.selectedIconPath : l.iconPath}
                style={{
                  width: 28,
                  height: 28,
                  display: "block"
                }}
              />
              <View
                style={{
                  color: l.pagePath === current ? tabBar.selectedColor : tabBar.color,
                  fontSize: 12,
                  marginTop: 4
                }}
              >
                {l.text}
              </View>
            </View>
          ))}
          <View
            style={{
              width: 70,
              height: 70,
              transform: `translateY(-17px)`,
              borderRadius: "50%",
              marginLeft: 16,
              marginRight: 16,
              boxSizing: "border-box",
              backgroundImage:
                "url(https://static.91goodschool.com/UpFiles/public/yikao/home-pulish.png)",
              backgroundSize: "100% 100%",
              backgroundRepeat: "no-repeat"
            }}
            onClick={handleClickAction}
          ></View>
          {right.map(l => (
            <View
              key={l.pagePath}
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
                boxSizing: "border-box",
                paddingLeft: 16,
                paddingRight: 16,
                pointerEvents: "auto"
              }}
              onClick={() => handleChangeTab(l)}
            >
              <Image
                src={l.pagePath === current ? l.selectedIconPath : l.iconPath}
                style={{
                  width: 28,
                  height: 28,
                  display: "block"
                }}
              />
              <View
                style={{
                  color: l.pagePath === current ? tabBar.selectedColor : tabBar.color,
                  fontSize: 12,
                  marginTop: 4
                }}
              >
                {l.text}
              </View>
            </View>
          ))}
        </View>
        {/* safe area */}
        <View
          style={{
            backgroundColor: tabBar.backgroundColor,
            height: `calc(env(safe-area-inset-bottom))`
          }}
        ></View>
      </View>
    </RootPortal>
  )
}
